<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商首页</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4444',
                        secondary: '#FF8888'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 w-[375px] min-h-[762px] mx-auto relative">
    <nav class="fixed top-0 left-0 right-0 h-[56px] bg-primary px-4 flex items-center justify-between z-50 w-[375px] mx-auto">
        <div class="font-['Pacifico'] text-white text-xl">logo</div>
        <div class="flex items-center space-x-2">
            <div class="relative">
                <input type="text" placeholder="搜索商品" class="w-[200px] h-[32px] rounded-full pl-8 pr-4 text-sm border-none bg-white/90">
                <i class="fas fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
            </div>
        </div>
    </nav>

    <main class="pt-[66px] pb-[70px]">
        <div class="px-4 mb-6">
            <img src="https://ai-public.mastergo.com/ai/img_res/e690c2eee542bd2e0522a3d662946935.jpg" class="w-full h-[160px] rounded-lg object-cover" alt="banner">
        </div>

        <div class="grid grid-cols-5 gap-4 px-4 mb-6">
            <div class="flex flex-col items-center">
                <div class="w-[48px] h-[48px] rounded-lg overflow-hidden mb-1">
                    <img src="https://ai-public.mastergo.com/ai/img_res/fc5bdb7eb25dab12497eee81744ea87b.jpg" class="w-full h-full object-cover" alt="分类">
                </div>
                <span class="text-xs text-gray-600 whitespace-nowrap overflow-hidden text-overflow-ellipsis">时尚服饰</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-[48px] h-[48px] rounded-lg overflow-hidden mb-1">
                    <img src="https://ai-public.mastergo.com/ai/img_res/70ec6f453766fe6931e9c81ea2e7e683.jpg" class="w-full h-full object-cover" alt="分类">
                </div>
                <span class="text-xs text-gray-600 whitespace-nowrap overflow-hidden text-overflow-ellipsis">数码电器</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-[48px] h-[48px] rounded-lg overflow-hidden mb-1">
                    <img src="https://ai-public.mastergo.com/ai/img_res/cbc262005f369c4a0566ea3e47e63682.jpg" class="w-full h-full object-cover" alt="分类">
                </div>
                <span class="text-xs text-gray-600 whitespace-nowrap overflow-hidden text-overflow-ellipsis">美食生鲜</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-[48px] h-[48px] rounded-lg overflow-hidden mb-1">
                    <img src="https://ai-public.mastergo.com/ai/img_res/05fdc3d67913b295217db6b83f81da6b.jpg" class="w-full h-full object-cover" alt="分类">
                </div>
                <span class="text-xs text-gray-600 whitespace-nowrap overflow-hidden text-overflow-ellipsis">美妆护肤</span>
            </div>
            <div class="flex flex-col items-center">
                <div class="w-[48px] h-[48px] rounded-lg overflow-hidden mb-1">
                    <img src="https://ai-public.mastergo.com/ai/img_res/94454a4cd631460f8509f0b90eb382cc.jpg" class="w-full h-full object-cover" alt="分类">
                </div>
                <span class="text-xs text-gray-600 whitespace-nowrap overflow-hidden text-overflow-ellipsis">家居日用</span>
            </div>
        </div>

        <div class="px-4 mb-4">
            <h2 class="text-lg font-medium mb-4">热门商品</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <img src="https://ai-public.mastergo.com/ai/img_res/daceb26d109e18d2df834ec1b47a015d.jpg" class="w-full h-[150px] object-cover rounded-lg mb-2" alt="商品">
                    <h3 class="text-sm font-medium mb-1">2024 春季新款连衣裙</h3>
                    <p class="text-xs text-gray-500 mb-2">优雅气质显瘦百搭</p>
                    <p class="text-primary font-medium">¥ 299</p>
                </div>
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <img src="https://ai-public.mastergo.com/ai/img_res/6f60c410bee47f0835551a88908a626a.jpg" class="w-full h-[150px] object-cover rounded-lg mb-2" alt="商品">
                    <h3 class="text-sm font-medium mb-1">智能无线耳机</h3>
                    <p class="text-xs text-gray-500 mb-2">主动降噪 超长续航</p>
                    <p class="text-primary font-medium">¥ 499</p>
                </div>
            </div>
        </div>

        <div class="px-4">
            <h2 class="text-lg font-medium mb-4">为你推荐</h2>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <img src="https://ai-public.mastergo.com/ai/img_res/f12132b231e6e7561201bde935f12ccf.jpg" class="w-full h-[150px] object-cover rounded-lg mb-2" alt="商品">
                    <h3 class="text-sm font-medium mb-1">补水保湿精华液</h3>
                    <p class="text-xs text-gray-500 mb-2">深层滋养 改善肤质</p>
                    <p class="text-primary font-medium">¥ 168</p>
                </div>
                <div class="bg-white rounded-lg p-2 shadow-sm">
                    <img src="https://ai-public.mastergo.com/ai/img_res/f44d9dfade7f1681c6c9c7efb72f4dce.jpg" class="w-full h-[150px] object-cover rounded-lg mb-2" alt="商品">
                    <h3 class="text-sm font-medium mb-1">北欧风格装饰画</h3>
                    <p class="text-xs text-gray-500 mb-2">简约现代 居家必备</p>
                    <p class="text-primary font-medium">¥ 129</p>
                </div>
            </div>
        </div>
    </main>

    <nav class="fixed bottom-0 left-0 right-0 h-[60px] bg-white border-t border-gray-100 flex items-center justify-around w-[375px] mx-auto">
        <a href="#" class="flex flex-col items-center space-y-1">
            <i class="fas fa-home text-primary text-xl flex justify-center items-center w-6 h-6"></i>
            <span class="text-xs text-primary">首页</span>
        </a>
        <a href="#" class="flex flex-col items-center space-y-1">
            <i class="fas fa-play text-gray-400 text-xl flex justify-center items-center w-6 h-6"></i>
            <span class="text-xs text-gray-400">视频</span>
        </a>
        <a href="#" class="flex flex-col items-center space-y-1">
            <i class="fas fa-comment text-gray-400 text-xl flex justify-center items-center w-6 h-6"></i>
            <span class="text-xs text-gray-400">消息</span>
        </a>
        <a href="#" class="flex flex-col items-center space-y-1">
            <i class="fas fa-shopping-cart text-gray-400 text-xl flex justify-center items-center w-6 h-6"></i>
            <span class="text-xs text-gray-400">购物</span>
        </a>
    </nav>
</body>
</html>
